<?php echo $this->Html->script(array("jquery.min.js", "jquery.form.js", "jquery.validate.js",
    "datepicker.js", "jquery.easing.1.3", "jquery.pagination.js", "jquery-ui.js")); ?>

<?php
echo $this->Html->css('datepicker');
?>
<script type="text/javascript">
    // <![CDATA[
    function pad(value, length) {
        length = length || 2;
        return "0000".substr(0,length - Math.min(String(value).length, length)) + value;
    };
    // ]]>
</script>

<div id="result">
    <h5>Registration </h5>
    <form method="post" id="add_admin" name="add_admin" action="<?php echo Configure::read('base_url') . "users/register"; ?>">
        <input name="data[User][group_id]" value="7" type="hidden">
        <table cellspacing="0" id="mytable" >
            <tbody>
                <tr>
                    <td>
                        <table width="100%" border="0" cellspacing="3" cellpadding="0">
                            <tr><td colspan="4" style="color: red;">All the entries with * are mandatory for signup. Please fill in all information correctly.</td></tr>
                            <tr>
                                <td width="30%" class="tdtext">First Name<em>*</em></td>
                                <td width="26%" class="tddata">
                                    <?php
                                    echo $this->Form->input('User.first_name', array('size' => '28', 'label' => false, 'div' => false, 'class' => 'required'));
                                    ?>
                                </td>
                                <td width="22%" class="tdtext">Last Name<em>*</em></td>
                                <td width="22%"  class="tddata">
                                    <?php
                                    echo $this->Form->input('User.last_name', array('size' => '28', 'label' => false, 'div' => false, 'class' => 'required'));
                                    ?>
                                </td>
                            </tr>
                            <tr>
                                <td class="tdtext">Street Address<em>*</em></td>
                                <td colspan="3"  class="tddata">
                                    <?php
                                    echo $this->Form->input('address', array('label' => false, 'div' => false, 'class' => 'required', 'size' => '62'));
                                    echo $this->Form->input('address1', array('label' => false, 'div' => false, 'size' => '62'));
                                    ?>
                                </td>
                            </tr>    
                            <tr>
                                <td class="tdtext">City<em>*</em></td>
                                <td colspan="3" class="tddata">
                                     <div id="userCityIdWrapper">
                                    <?php echo $this->Form->input('User.city_id', array('label' => false, 'div' => false, 'class' => 'required')); ?>
                                     </div>    
                                 </td>
                            </tr>
                            <tr>
                                <td class="tdtext">State<em>*</em></td>
                                <td class="tddata">
                                    <div id="userStateIdWrapper">
                                    <?php
                                    echo $this->Form->input('User.state_id', array('label' => false, 'div' => false, 'selected' => 3435));
                                    ?>
                                    </div>
                                </td>
                                <td class="tdtext">Zip<em>*</em></td>
                                <td class="tddata">
                                    <?php
                                    echo $this->Form->input('User.zip', array('label' => false, 'div' => false, 'class' => 'required', 'size' => '28'));
                                    ?>
                                </td>
                            </tr>
                            <tr>
                                <td class="tdtext">Country<em>*</em></td>
                                <td colspan="3" class="tddata">
                                    <?php
                                    echo $this->Form->input('User.country_id', array('selected' => 223, 'label' => false, 'div' => false, 'class' => 'required', 'style' => 'width:140px'));
                                    ?>
                                </td>

                            </tr>
                            <tr>
                                <td class="tdtext">Primary Phone #<em>*</em></td>
                                <td colspan="3" class="tddata">
                                    <?php
                                    echo $this->Form->input('phone1', array('label' => false, 'div' => false, 'maxlength' => "3", 'size' => '4', 'style' => 'float:left;margin-right:10px;'));
                                    echo $this->Form->input('phone2', array('label' => false, 'div' => false, 'maxlength' => "3", 'size' => '4', 'style' => 'float:left;margin-right:10px;'));
                                    echo $this->Form->input('phone3', array('label' => false, 'div' => false, 'maxlength' => "4", 'size' => '5', 'class' => 'required'));
                                    ?>
                                </td>
                            </tr>
                            <tr>
                                <td class="tdtext">Email<em>*</em></td>
                                <td class="tddata">
                                    <?php
                                    echo $this->Form->input('email', array('id' => 'email', 'name' => 'email', 'label' => false, 'div' => false, 'class' => 'required email', 'size' => '28'));
                                    ?>
                                </td>
                                <td class="tdtext">Confirm Email<em>*</em></td>
                                <td class="tddata">
                                    <?php
                                    echo $this->Form->input('cemail', array('label' => false, 'name' => 'cemail', 'div' => false, 'size' => '28'));
                                    ?>
                                </td>
                            </tr>
                            <tr >
                                <td class="tdtext">User Id<em>*</em></td>
                                <td colspan="3" class="tddata">
                                    <?php echo $this->Form->input('User.username', array('label' => false, 'div' => false, 'name' => 'username', 'id' => 'username', 'size' => '28'));
                                    ?>
                                </td>
                            </tr>
                            <tr>
                                <td class="tdtext">Password<em>*</em></td>
                                <td class="tddata">
                                    <?php echo $this->Form->input('password', array('label' => false, 'div' => false, 'class' => 'required', 'name' => 'password', 'id' => 'password', 'type' => 'password', 'size' => '28'));
                                    ?>
                                </td>
                                <td class="tdtext">Confirm Password<em>*</em></td>
                                <td class="tddata">
                                    <?php echo $this->Form->input('cpassword', array('label' => false, 'div' => false, 'class' => 'required', 'name' => 'cpassword', 'id' => 'cpassword', 'type' => 'password', 'size' => '28'));
                                    ?>
                                </td>
                            </tr>
                            <tr >
                                <td class="tdtext">Secret Question<em>*</em></td>
                                <td colspan="3" class="tddata">
                                    <?php
                                    echo $this->Form->input('User.secretquestion_id', array('empty' => 'Select your Secret question', 'div' => false, 'label' => false, 'class' => 'required'));
                                    ?>
                                </td>
                            </tr>
                            <tr>
                                <td class="tdtext">Your Secret Answer<em>*</em></td>
                                <td colspan="3" class="tddata">
                                    <?php
                                    echo $this->Form->input('User.ques_ans', array('label' => false, 'div' => false, 'class' => 'required', 'size' => '28'));
                                    ?>
                                </td>
                            </tr>
                            <tr >
                                <td class="tdtext">Date of Birth<em>*</em></td>
                                <td colspan="3" class="tddata errorcls">
                                    <?php
                                    $minYear = date("Y") - 18;
                                    $maxYear = date("Y") - 150;
                                    echo $this->Form->input('User.dateofbirth', array('label' => false, 'div' => false, 'class' => 'required', 'minYear' => $minYear, 'maxYear' => $maxYear, 'dateFormat' => 'YMD'));
                                    ?>
                            <!--        <input type="text" readonly class="w16em required" id="selectDate" name="data[User][dateofbirth]" />-->

                                    <script type="text/javascript">
                                        //     var today     = new Date(),
                                        //            // low range, 35 days before today's date
                                        //            //rangeLow  = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 35),
                                        //			// low range, form today's date
                                        //            rangeLow  = new Date(today.getFullYear()-150, today.getMonth(), today.getDate()),
                                        //            // high range, one year after today's date
                                        //            rangeHigh = new Date(today.getFullYear()-18, today.getMonth(), today.getDate())
                                        //
                                        //        var opts = {
                                        //                formElements:{"selectDate":"Y-ds-m-ds-d"},
                                        //                showWeeks:true,
                                        //                statusFormat:"l-cc-sp-d-sp-F-sp-Y",
                                        //                // Set some dynamically calculated ranges
                                        //                rangeLow:rangeLow.getFullYear() + "" + pad(rangeLow.getMonth()+1) + pad(rangeLow.getDate()),
                                        //                rangeHigh:rangeHigh.getFullYear() + "" + pad(rangeHigh.getMonth()+1) + pad(rangeHigh.getDate())
                                        //
                                        //        };
                                        //        if(jQuery("#fd-selectDate").html()!=null){
                                        //           jQuery('#fd-selectDate').remove();
                                        //        }
                                        //        datePickerController.createDatePicker(opts);
                                        //


                                        // <![CDATA[
                                        /* var opts = {
                                                    formElements:{"selectDate":"Y-ds-m-ds-d"},
                                                    showWeeks:true,
                                                    // Show a status bar and use the format "l-cc-sp-d-sp-F-sp-Y" (e.g. Friday, 25 September 2009)
                                                    statusFormat:"l-cc-sp-d-sp-F-sp-Y"
                                            };
                                            //alert(jQuery("#fd-selectDate").html());
                                            if(jQuery("#fd-selectDate").html()!=null){
                                               jQuery('#fd-selectDate').remove();
                                            }
                                            datePickerController.createDatePicker(opts);*/
                                        // ]]>
                                    </script>
                                </td>

                            </tr>
                            <!--tr>
                            <td class="tdtext">User Type<em>*</em></td>
                            <td colspan="3" class="tddata">
                            <?php
                            echo $this->Form->input('User.group_id', array('empty' => 'Select', 'div' => false, 'label' => false, 'class' => 'required'));
                            ?>
                            </td></tr-->
                            <tr >
                                <td colspan="3">Enter the text as appears in the image<em>*</em></td>
                                <td>

                                </td>

                            </tr>
                            <tr >
                                <td colspan="2">
                                    <img src="<?php echo $html->url('/users/captcha'); ?>" /><br>
                                    <?php
                                    echo $this->Form->input('User.cap2', array('label' => false, 'id' => 'cap2', 'name' => 'cap2', 'div' => false, 'class' => 'required', 'size' => '30', 'style' => 'float:left;margin-right:10px;'));
                                    ?>
                                </td>
                                <td colspan="2">


                                </td>

                            </tr>

                            <tr >
                                <td  colspan="4">
                                    <input type="checkbox" id="UserAgree"  style="float: left;
                                           margin-right: 10px;" class="required" name="agree" title="Please agree with term"/>
                                           <?php
                                           //echo $this->Form->checkbox('User.agree',array('label'=>false,'div'=>false,'class'=>'required','style'=>'float:left;margin-right:10px;'));
                                           ?>
                                    I agree that:
                                    <ul>
                                        <li>I accept the <a title="User Agreement"
                                                            href="<?php echo Configure::read('base_url'); ?>user_agreements">User Agreement</a>
                                            and <a title="User Agreement"
                                                   href="<?php echo Configure::read('base_url'); ?>user_agreements/index/9">Privacy Policy</a></li>
                                        <li>I may receive communications from Authentic Avenue and can change my notification preferences
                                            in My Account.</li>
                                        <li>I'm at least 18 years old.</li>
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><input type="submit" style="background:#73AE0B; color:#fff; font-size:14px;" name="button" id="button" value="Submit" /></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </tbody></table>
    </form>
</div>
<script type="text/javascript">
    function pageselectCallback(page_index, jq, items_per_page){
        page_index = page_index ==0 ? 1 : (page_index+1);
        var startIndex = parseInt(((page_index - 1) * items_per_page));
        var endIndex = parseInt(((page_index) * items_per_page));
        jQuery('#Searchresult ul').empty();
        jQuery('#hiddenresult ul li').each(function(i,obj){
            if(startIndex <= i && i < endIndex ){
                var new_content = jQuery(obj).clone();
                jQuery('#Searchresult ul').append(new_content);
            }
        });
        var totalPage = 0;
        try{
            totalPage = Math.ceil(parseInt(jQuery('#hiddenresult ul li').size())/items_per_page);
        }catch(ex){

        }
        jQuery('#pagePositionNum').empty().html('Page '+page_index+' of '+totalPage);
        return false;
    }
    
    jQuery(document).ready(function(){
        //Populate City drop down on change State drop down
        jQuery("#UserStateId").live('change',function () {
            var stateId=jQuery(this).val();
            var URL="<?php echo Configure::read('base_url'); ?>users/loadCity/"+stateId;          
            jQuery("#UserCityId").html("<option value='0'>loading...</option>");
            jQuery("#userCityIdWrapper").load(URL);
        
        });
        //Populate State drop down on change Country dropdown
        jQuery("#UserCountryId").live('change',function () {
            var countryId=jQuery(this).val();
            var URL="<?php echo Configure::read('base_url'); ?>users/loadState/"+countryId;          
            jQuery("#UserStateId").html("<option value='0'>loading...</option>");
            jQuery("#userStateIdWrapper").load(URL);
        
        });
        jQuery('#viewNumPageItem ul li a').live('click',function(){
            var $href = jQuery(this).attr('href');
            $href = parseInt($href.replace('#',''));
            // count entries inside the hidden content
            var num_entries = jQuery('#hiddenresult ul li').length;

            // Create content inside pagination element
            jQuery("#Pagination").empty().pagination(num_entries, {
                callback: pageselectCallback,
                items_per_page: $href // Show only one item per page
            });
            
            jQuery(this).closest('ul').find('li span').each(function(i,$this){
                var pageNum = jQuery(this).html();
                jQuery(this).closest('li').empty().html('<a href="#'+pageNum+'">'+pageNum+'</a>');
            });
            
            jQuery(this).closest('li').empty().html('<span>'+$href+'</span>');
            return false;
        }).eq(0).trigger('click') ;

        jQuery('#gotoPage button').click(function(){
            var $pageNum = parseInt(jQuery('#gotoPage input[type=text]').val());
            $pageNum = $pageNum - 1;
            jQuery("#Pagination").trigger('setPage', [$pageNum]);
        });
        //initPagination();

        /*jQuery.ajax({
               type: 'GET',
       url : baseurl+"users/getcv/",
               dataType: 'json',
       success : function (data) {				    
                       jQuery("#cap1").val(data.CV);
                       }
       });
         */

        jQuery.validator.addMethod("alphaNumeric", function (value, element) {
            return this.optional(element) || /^[0-9a-zA-Z._-]+$/.test(value);
        }, "Username must contain only letters, numbers,periods(.), hyphens (-) and underscores ( _ ).");

        // show a simple loading indicator
        var loader = jQuery('<div id="loader"><img src="<?php echo Configure::read('base_url'); ?>img/loading.gif" alt="loading..." /></div>')
        .css({position: "relative", top: "1em", left: "25em"})
        .appendTo("body")
        .hide();
        jQuery().ajaxStart(function() {
            loader.show();
        }).ajaxStop(function() {
            loader.hide();
        }).ajaxError(function(a, b, e) {
            throw e;
        });

        var v = jQuery("#add_admin").validate({
            rules: {
                email:{
                    'required':true,
                    'email':true,
                    remote: {
                        url: baseurl+"users/emailcheck",
                        type: "post",
                        data: {
                            email: function() {
                                return $("#email").val();
                            }
                        }
                    }

                } ,
                cemail: {
                    required: true,
                    equalTo: '#email'
                },
                password: 'required',
                cpassword: {
                    required: true,
                    equalTo: '#password'
                },
                    
                cap2: {
                    required: true,
                    remote: {
                        url: baseurl+"users/capcheck",
                        type: "post",
                        data: {
                            cap2: function() {
                                return jQuery("#cap2").val();
                            }
                        }
                    }
                },
                username: {
                    required: true,
                    alphaNumeric: true,
                    minlength: 5,
                    remote: {
                        url: baseurl+"users/usercheck",
                        type: "post",
                        data: {
                            username: function() {
                                return jQuery("#username").val();
                            }
                        }
                    }
                }
            },
            messages: {
                cap2: {
                    remote:'Please enter the same value again.'
                }
            },
            submitHandler: function(form) {
                jQuery(form).ajaxSubmit({
                    target: "#result"
                });
            }
        });
    });
</script>
<style type="text/style">
    input{font-family: trebuchet MS,"Myriad Pro", Arial, Tahoma, sans-serif;color: #777777;margin: 0;font-size:12px; border: 1px solid #cccccc;}
    label,select{font-size:12px;}	
    .errorcls input,.errorcls label{float: left;}
</style>